<template>
  <div class="analytics-page">
    <ASpin :spinning="loading" tip="正在加载统计数据...">
      <div class="analytics-container">
        <!-- 页面标题 -->
        <div class="page-header">
          <div class="header-top">
            <AButton 
              class="back-btn" 
              @click="goBack"
              type="primary"
              ghost
            >
              <ArrowLeftOutlined />
              返回数据大屏
            </AButton>
          </div>
          <h1 class="page-title">
            <BarChartOutlined class="title-icon" />
            统计分析中心
          </h1>
          <p class="page-description">全面数据洞察，智能决策支持</p>
        </div>

        <!-- 时间选择器 -->
        <ACard class="time-selector-card">
          <div class="time-selector">
            <span class="time-label">统计时间范围：</span>
            <ARangePicker
              v-model:value="timeRange"
              :disabled-date="disabledDate"
              format="YYYY-MM-DD"
              @change="onTimeRangeChange"
              class="custom-range-picker"
            />
            <AButton
              type="primary"
              @click="refreshData"
              :loading="loading"
              class="refresh-btn"
            >
              <ReloadOutlined />
              刷新数据
            </AButton>
          </div>
        </ACard>

        <!-- 核心指标卡片 -->
        <div class="metrics-grid">
          <ACard class="metric-card users-card" hoverable>
            <AStatistic
              title="总用户数"
              :value="analyticsData.totalUsers"
              :valueStyle="{ color: '#1890ff', fontSize: '32px' }"
            >
              <template #prefix>
                <UserOutlined class="metric-icon" />
              </template>
              <template #suffix>
                <span class="metric-unit">人</span>
              </template>
            </AStatistic>
            <div class="metric-trend">
              <span class="trend-label">较上期</span>
              <span :class="['trend-value', analyticsData.usersTrend > 0 ? 'trend-up' : 'trend-down']">
                <ArrowUpOutlined v-if="analyticsData.usersTrend > 0" />
                <ArrowDownOutlined v-else />
                {{ Math.abs(analyticsData.usersTrend) }}%
              </span>
            </div>
          </ACard>

          <ACard class="metric-card posts-card" hoverable>
            <AStatistic
              title="总帖子数"
              :value="analyticsData.totalPosts"
              :valueStyle="{ color: '#52c41a', fontSize: '32px' }"
            >
              <template #prefix>
                <FileTextOutlined class="metric-icon" />
              </template>
              <template #suffix>
                <span class="metric-unit">篇</span>
              </template>
            </AStatistic>
            <div class="metric-trend">
              <span class="trend-label">较上期</span>
              <span :class="['trend-value', analyticsData.postsTrend > 0 ? 'trend-up' : 'trend-down']">
                <ArrowUpOutlined v-if="analyticsData.postsTrend > 0" />
                <ArrowDownOutlined v-else />
                {{ Math.abs(analyticsData.postsTrend) }}%
              </span>
            </div>
          </ACard>

          <ACard class="metric-card active-card" hoverable>
            <AStatistic
              title="活跃用户"
              :value="analyticsData.activeUsers"
              :valueStyle="{ color: '#faad14', fontSize: '32px' }"
            >
              <template #prefix>
                <FireOutlined class="metric-icon" />
              </template>
              <template #suffix>
                <span class="metric-unit">人</span>
              </template>
            </AStatistic>
            <div class="metric-trend">
              <span class="trend-label">较上期</span>
              <span :class="['trend-value', analyticsData.activeTrend > 0 ? 'trend-up' : 'trend-down']">
                <ArrowUpOutlined v-if="analyticsData.activeTrend > 0" />
                <ArrowDownOutlined v-else />
                {{ Math.abs(analyticsData.activeTrend) }}%
              </span>
            </div>
          </ACard>

          <ACard class="metric-card reports-card" hoverable>
            <AStatistic
              title="举报处理"
              :value="analyticsData.totalReports"
              :valueStyle="{ color: '#ff4d4f', fontSize: '32px' }"
            >
              <template #prefix>
                <AlertOutlined class="metric-icon" />
              </template>
              <template #suffix>
                <span class="metric-unit">件</span>
              </template>
            </AStatistic>
            <div class="metric-trend">
              <span class="trend-label">处理率</span>
              <span class="trend-value process-rate">
                {{ analyticsData.reportProcessRate }}%
              </span>
            </div>
          </ACard>
        </div>

        <!-- 图表分析区域 -->
        <div class="charts-section">
          <!-- 用户增长趋势 -->
          <ACard class="chart-card" title="用户增长趋势分析">
            <template #extra>
              <ARadioGroup v-model:value="userChartType" button-style="solid" size="small">
                <ARadioButton value="line">线图</ARadioButton>
                <ARadioButton value="bar">柱状图</ARadioButton>
              </ARadioGroup>
            </template>
            <div ref="userGrowthChart" class="chart-container"></div>
          </ACard>

          <!-- 内容分布分析 -->
          <ACard class="chart-card" title="内容类型分布">
            <template #extra>
              <ASelect v-model:value="contentPeriod" size="small" style="width: 120px">
                <ASelectOption value="week">最近一周</ASelectOption>
                <ASelectOption value="month">最近一月</ASelectOption>
                <ASelectOption value="quarter">最近一季</ASelectOption>
              </ASelect>
            </template>
            <div ref="contentDistChart" class="chart-container"></div>
          </ACard>
        </div>

        <!-- 详细数据表格 -->
        <ACard class="table-card" title="用户活跃度详细数据">
          <template #extra>
            <ASpace>
              <AInput
                v-model:value="searchText"
                placeholder="搜索用户"
                allowClear
                style="width: 200px"
              >
                <template #prefix>
                  <SearchOutlined />
                </template>
              </AInput>
              <AButton type="primary" @click="exportData">
                <DownloadOutlined />
                导出数据
              </AButton>
            </ASpace>
          </template>
          <ATable
            :columns="tableColumns"
            :data-source="filteredTableData"
            :pagination="tablePagination"
            :scroll="{ x: 800 }"
            bordered
            size="middle"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'avatar'">
                <AAvatar :src="record.avatar" :alt="record.username">
                  {{ record.username.charAt(0).toUpperCase() }}
                </AAvatar>
              </template>
              <template v-else-if="column.key === 'status'">
                <ATag :color="record.status === 'active' ? 'green' : 'red'">
                  {{ record.status === 'active' ? '活跃' : '不活跃' }}
                </ATag>
              </template>
              <template v-else-if="column.key === 'lastLogin'">
                <span>{{ formatDate(record.lastLogin) }}</span>
              </template>
              <template v-else-if="column.key === 'action'">
                <ASpace>
                  <AButton type="link" size="small" @click="viewUserDetail(record)">
                    详情
                  </AButton>
                  <AButton type="link" size="small" @click="sendMessage(record)">
                    消息
                  </AButton>
                </ASpace>
              </template>
            </template>
          </ATable>
        </ACard>

        <!-- 系统性能监控 -->
        <div class="performance-section">
          <ACard class="performance-card" title="系统性能监控">
            <div class="performance-grid">
              <div class="performance-item">
                <div class="performance-label">CPU使用率</div>
                <AProgress
                  :percent="systemPerformance.cpu"
                  :stroke-color="getProgressColor(systemPerformance.cpu)"
                  :show-info="true"
                />
              </div>
              <div class="performance-item">
                <div class="performance-label">内存使用率</div>
                <AProgress
                  :percent="systemPerformance.memory"
                  :stroke-color="getProgressColor(systemPerformance.memory)"
                  :show-info="true"
                />
              </div>
              <div class="performance-item">
                <div class="performance-label">磁盘使用率</div>
                <AProgress
                  :percent="systemPerformance.disk"
                  :stroke-color="getProgressColor(systemPerformance.disk)"
                  :show-info="true"
                />
              </div>
              <div class="performance-item">
                <div class="performance-label">网络延迟</div>
                <div class="network-latency">
                  <span class="latency-value">{{ systemPerformance.latency }}ms</span>
                  <ATag :color="systemPerformance.latency < 50 ? 'green' : systemPerformance.latency < 100 ? 'orange' : 'red'">
                    {{ systemPerformance.latency < 50 ? '优秀' : systemPerformance.latency < 100 ? '良好' : '较慢' }}
                  </ATag>
                </div>
              </div>
            </div>
          </ACard>
        </div>
      </div>
    </ASpin>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import {
  Card as ACard,
  Spin as ASpin,
  Statistic as AStatistic,
  Button as AButton,
  DatePicker as ADatePicker,
  RangePicker as ARangePicker,
  Radio as ARadio,
  RadioGroup as ARadioGroup,
  RadioButton as ARadioButton,
  Select as ASelect,
  SelectOption as ASelectOption,
  Table as ATable,
  Input as AInput,
  Space as ASpace,
  Avatar as AAvatar,
  Tag as ATag,
  Progress as AProgress,
  message
} from 'ant-design-vue'
import {
  BarChartOutlined,
  UserOutlined,
  FileTextOutlined,
  FireOutlined,
  AlertOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  ArrowLeftOutlined,
  ReloadOutlined,
  SearchOutlined,
  DownloadOutlined
} from '@ant-design/icons-vue'
import * as echarts from 'echarts/core'
import {
  LineChart,
  BarChart,
  PieChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'

// 注册 ECharts 组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent,
  LineChart,
  BarChart,
  PieChart,
  CanvasRenderer
])

// 路由
const router = useRouter()

// 响应式数据
const loading = ref(false)
const timeRange = ref<[Dayjs, Dayjs] | null>(null)
const userChartType = ref('line')
const contentPeriod = ref('month')
const searchText = ref('')

// 统计数据
const analyticsData = ref({
  totalUsers: 4567,
  totalPosts: 6224,
  activeUsers: 756,
  totalReports: 1034,
  usersTrend: 15.6,
  postsTrend: 8.3,
  activeTrend: 2.1,
  reportProcessRate: 96.8
})

// 系统性能数据
const systemPerformance = ref({
  cpu: 68,
  memory: 72,
  disk: 45,
  latency: 32
})

// 图表实例
const userGrowthChart = ref(null)
const contentDistChart = ref(null)
let userChart = null
let contentChart = null

// 表格数据
const tableData = ref([
  {
    id: 1,
    username: 'Autumn',
    avatar: '',
    email: 'Autumn@qq.com',
    postCount: 25,
    loginCount: 156,
    lastLogin: new Date('2024-01-15'),
    status: 'active'
  },
  {
    id: 2,
    username: '小瑾',
    avatar: '',
    email: '3338170081@qq.com',
    postCount: 18,
    loginCount: 89,
    lastLogin: new Date('2024-01-12'),
    status: 'active'
  },
  {
    id: 3,
    username: '落枫点秋',
    avatar: '',
    email: '3226322882@qq.com',
    postCount: 12,
    loginCount: 45,
    lastLogin: new Date('2023-12-28'),
    status: 'inactive'
  },
  {
    id: 4,
    username: '芝士',
    avatar: '',
    email: '732771651@qq.com',
    postCount: 31,
    loginCount: 201,
    lastLogin: new Date('2024-01-16'),
    status: 'active'
  },
  {
    id: 5,
    username: 'Aurora',
    avatar: '',
    email: '1390128564@qq.com',
    postCount: 7,
    loginCount: 23,
    lastLogin: new Date('2024-01-10'),
    status: 'inactive'
  }
])

// 表格列配置
const tableColumns = [
  {
    title: '头像',
    dataIndex: 'avatar',
    key: 'avatar',
    width: 80,
    align: 'center' as const
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
    sorter: (a: any, b: any) => a.username.localeCompare(b.username)
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email'
  },
  {
    title: '发帖数',
    dataIndex: 'postCount',
    key: 'postCount',
    sorter: (a: any, b: any) => a.postCount - b.postCount,
    align: 'center' as const
  },
  {
    title: '登录次数',
    dataIndex: 'loginCount',
    key: 'loginCount',
    sorter: (a: any, b: any) => a.loginCount - b.loginCount,
    align: 'center' as const
  },
  {
    title: '最后登录',
    dataIndex: 'lastLogin',
    key: 'lastLogin',
    sorter: (a: any, b: any) => new Date(a.lastLogin).getTime() - new Date(b.lastLogin).getTime()
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    filters: [
      { text: '活跃', value: 'active' },
      { text: '不活跃', value: 'inactive' }
    ],
    onFilter: (value: any, record: any) => record.status === value,
    align: 'center' as const
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
    align: 'center' as const
  }
]

// 表格分页配置
const tablePagination = ref({
  current: 1,
  pageSize: 10,
  total: tableData.value.length,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
})

// 计算属性
const filteredTableData = computed(() => {
  if (!searchText.value) {
    return tableData.value
  }
  return tableData.value.filter(item =>
    item.username.toLowerCase().includes(searchText.value.toLowerCase()) ||
    item.email.toLowerCase().includes(searchText.value.toLowerCase())
  )
})

// 方法
const disabledDate = (current: Dayjs) => {
  return current && current.isAfter(dayjs())
}

const onTimeRangeChange = (dates: [Dayjs, Dayjs] | null) => {
  if (dates) {
    console.log('时间范围变更:', dates)
    refreshData()
  }
}

const refreshData = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 更新数据
    analyticsData.value = {
      ...analyticsData.value,
      totalUsers: Math.floor(Math.random() * 1000) + 12000,
      totalPosts: Math.floor(Math.random() * 1000) + 8000,
      activeUsers: Math.floor(Math.random() * 1000) + 3000,
      totalReports: Math.floor(Math.random() * 100) + 200
    }
    
    // 更新系统性能数据
    systemPerformance.value = {
      cpu: Math.floor(Math.random() * 40) + 40,
      memory: Math.floor(Math.random() * 50) + 30,
      disk: Math.floor(Math.random() * 60) + 20,
      latency: Math.floor(Math.random() * 80) + 20
    }
    
    // 重新初始化图表
    initCharts()
    
    message.success('数据刷新成功')
  } catch (error) {
    message.error('数据刷新失败')
  } finally {
    loading.value = false
  }
}

const getProgressColor = (value: number) => {
  if (value < 50) return '#52c41a'
  if (value < 80) return '#faad14'
  return '#ff4d4f'
}

const formatDate = (date: Date) => {
  return date.toLocaleDateString('zh-CN')
}

const viewUserDetail = (record: any) => {
  message.info(`查看用户 ${record.username} 的详细信息`)
}

const sendMessage = (record: any) => {
  message.info(`向用户 ${record.username} 发送消息`)
}

const exportData = () => {
  message.success('数据导出成功')
}

const goBack = () => {
  router.push('/datascreen')
}

// 初始化用户增长图表
const initUserGrowthChart = () => {
  if (userGrowthChart.value) {
    userChart = echarts.init(userGrowthChart.value)
    
    const xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    const userData = [200, 250, 380, 270, 410, 340, 490, 380, 450, 400, 520, 500]
    const activeData = [400, 300, 570, 570, 700, 650, 600, 580, 600, 582, 750, 600]
    
    const option = {
      title: {
        text: '用户增长趋势',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
        data: ['总用户数', '活跃用户数'],
        top: 30
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: xData,
        axisLine: {
          lineStyle: {
            color: '#ccc'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#ccc'
          }
        }
      },
      series: [
        {
          name: '总用户数',
          type: userChartType.value,
          data: userData,
          smooth: true,
          itemStyle: {
            color: '#1890ff'
          }
        },
        {
          name: '活跃用户数',
          type: userChartType.value,
          data: activeData,
          smooth: true,
          itemStyle: {
            color: '#52c41a'
          }
        }
      ]
    }
    
    userChart.setOption(option)
  }
}

// 初始化内容分布图表
const initContentDistChart = () => {
  if (contentDistChart.value) {
    contentChart = echarts.init(contentDistChart.value)
    
    const data = [
      { value: 1048, name: '学习交流', itemStyle: { color: '#1890ff' } },
      { value: 735, name: '生活分享', itemStyle: { color: '#52c41a' } },
      { value: 580, name: '技术分享', itemStyle: { color: '#faad14' } },
      { value: 484, name: '求助问答', itemStyle: { color: '#ff4d4f' } },
      { value: 300, name: '其他', itemStyle: { color: '#722ed1' } }
    ]
    
    const option = {
      title: {
        text: '内容类型分布',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: data.map(item => item.name)
      },
      series: [
        {
          name: '内容类型',
          type: 'pie',
          radius: '50%',
          center: ['50%', '60%'],
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    
    contentChart.setOption(option)
  }
}

// 初始化所有图表
const initCharts = () => {
  setTimeout(() => {
    initUserGrowthChart()
    initContentDistChart()
  }, 100)
}

// 监听图表类型变化
watch(userChartType, () => {
  initUserGrowthChart()
})

watch(contentPeriod, () => {
  initContentDistChart()
})

// 组件挂载
onMounted(() => {
  initCharts()
  
  // 窗口大小变化时重新调整图表
  window.addEventListener('resize', () => {
    if (userChart) userChart.resize()
    if (contentChart) contentChart.resize()
  })
})
</script>

<style scoped>
.analytics-page {
  padding: 24px;
  background: 
    radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(91, 141, 239, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 0, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(255, 107, 107, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #0a0f1c 0%, #1a1f3a 25%, #2d1b69 50%, #16213e 75%, #0a0f1c 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: auto;
}

.analytics-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(0, 212, 255, 0.5), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(91, 141, 239, 0.4), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 0, 0.6), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255, 107, 107, 0.4), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(0, 255, 136, 0.5), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: starfield 20s linear infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes starfield {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-200px); }
}

.analytics-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 32px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 16px;
  box-shadow: 
    0 4px 20px rgba(0, 212, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  animation: scanning 3s infinite;
}

@keyframes scanning {
  0% { left: -100%; }
  100% { left: 100%; }
}

.header-top {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.back-btn {
  border-color: #00d4ff !important;
  color: #00d4ff !important;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: #40a9ff !important;
  color: #40a9ff !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
  transform: translateY(-2px);
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.title-icon {
  color: #00d4ff;
  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.8));
}

.page-description {
  font-size: 16px;
  color: #b0c4de;
  margin: 0;
  text-shadow: 0 0 10px rgba(176, 196, 222, 0.3);
}

/* 时间选择器 */
.time-selector-card {
  margin-bottom: 24px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
  backdrop-filter: blur(10px);
}

.time-selector {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.time-label {
  font-weight: 500;
  color: #b0c4de;
}

.custom-range-picker {
  min-width: 300px;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 核心指标卡片 */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.metric-card {
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(0, 212, 255, 0.3) !important;
  box-shadow: 
    0 4px 20px rgba(0, 212, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3182ce, #63b3ed);
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 8px 30px rgba(0, 212, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(0, 212, 255, 0.5) !important;
}

.users-card::before { background: linear-gradient(90deg, #1890ff, #40a9ff); }
.posts-card::before { background: linear-gradient(90deg, #52c41a, #73d13d); }
.active-card::before { background: linear-gradient(90deg, #faad14, #ffc53d); }
.reports-card::before { background: linear-gradient(90deg, #ff4d4f, #ff7875); }

.metric-icon {
  font-size: 24px !important;
}

.metric-unit {
  font-size: 16px;
  color: #64748b;
}

.metric-trend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.trend-label {
  font-size: 14px;
  color: #64748b;
}

.trend-value {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.trend-up {
  color: #16a34a;
}

.trend-down {
  color: #dc2626;
}

.process-rate {
  color: #3182ce;
}

/* 图表区域 */
.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.chart-card {
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
  backdrop-filter: blur(10px);
}

.chart-container {
  height: 400px;
  width: 100%;
}

/* 表格卡片 */
.table-card {
  margin-bottom: 32px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
  backdrop-filter: blur(10px);
}

/* 性能监控 */
.performance-section {
  margin-bottom: 32px;
}

.performance-card {
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
  backdrop-filter: blur(10px);
}

.performance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.performance-item {
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(5px);
}

.performance-label {
  font-weight: 500;
  color: #b0c4de;
  margin-bottom: 12px;
}

.network-latency {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.latency-value {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .charts-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .analytics-page {
    padding: 16px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .time-selector {
    flex-direction: column;
    align-items: stretch;
  }
  
  .custom-range-picker {
    min-width: auto;
  }
}

/* 科幻主题样式增强 */
:deep(.ant-card) {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  color: #ffffff;
}

:deep(.ant-card-head) {
  border-bottom: 1px solid rgba(0, 212, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

:deep(.ant-card-head-title) {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

:deep(.ant-table) {
  background: transparent !important;
  color: #ffffff !important;
}

:deep(.ant-table-thead > tr > th) {
  background: rgba(0, 0, 0, 0.4) !important;
  border-bottom: 2px solid rgba(0, 212, 255, 0.3) !important;
  color: #ffffff !important;
  font-weight: 600;
}

:deep(.ant-table-tbody > tr > td) {
  background: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
  color: #ffffff !important;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(0, 212, 255, 0.1) !important;
}

:deep(.ant-statistic-title) {
  color: #b0c4de !important;
  font-weight: 500;
}

:deep(.ant-statistic-content) {
  color: #ffffff !important;
}

:deep(.ant-input) {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(0, 212, 255, 0.3) !important;
  color: #ffffff !important;
}

:deep(.ant-input::placeholder) {
  color: #7a8ab0 !important;
}

:deep(.ant-picker) {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(0, 212, 255, 0.3) !important;
  color: #ffffff !important;
}

:deep(.ant-select-selector) {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(0, 212, 255, 0.3) !important;
  color: #ffffff !important;
}

:deep(.ant-radio-button-wrapper) {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(0, 212, 255, 0.3) !important;
  color: #ffffff !important;
}

:deep(.ant-radio-button-wrapper-checked) {
  background: rgba(0, 212, 255, 0.2) !important;
  border-color: #00d4ff !important;
  color: #00d4ff !important;
}
</style>
